$fontSize: pxToRem(20);
.com-xySkinPeel {
  margin: 0;
  display: inline-block;
  position: relative;
  width: calc($fontSize * 2);
  height: $fontSize;
  border: pxToRem(1) solid var(--skinToggle-color-border);
  outline: none;
  border-radius: pxToRem(10);
  box-sizing: border-box;
  background: var(--skinToggle-color-bg);
  cursor: pointer;
  transition:
    border-color 0.3s,
    background-color 0.3s;

  .com-xySkinPeel-icon {
    width: calc($fontSize - pxToRem(4));
    height: calc($fontSize - pxToRem(4));
    position: absolute;
    top: pxToRem(1);
    left: pxToRem(1);
    border-radius: 50%;
    background-color: var(--color-bg);
    transform: translateX(0);
    transition:
      border-color 0.3s,
      background-color 0.3s,
      transform 0.3s;
    font-size: calc($fontSize - pxToRem(7));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    .com-xySkinPeel-icon-dark {
      opacity: 0;
    }

    .com-xySkinPeel-icon-light {
      opacity: 1;
    }
  }
}

.dark {
  .com-xySkinPeel-icon {
    transform: translate($fontSize);

    .com-xySkinPeel-icon-dark {
      opacity: 1;
    }

    .com-xySkinPeel-icon-light {
      opacity: 0;
    }
  }
}